<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	  <title>Imagetool demo</title>
	  <meta name="generator" content="BBEdit 8.2" />
    <style type="text/css">
      body {
        font-family: Arial, Helvetica;
        font-size: 0.8em;
      }
      
      p.small {
        font-size: 0.7em;
      }
      
      h1 {
        font-size: 1.4em;
      }
      
      h2 {
        font-size: 1em;
      }
    </style>
    
    <script src="@jquery" type="text/javascript"></script>
	  <script src="@imagetool" type="text/javascript"></script>
    <script type="text/javascript">
      $(function() {
        $(".example1 img").imagetool({
          viewportWidth: 600
         ,viewportHeight: 250
         ,topX: 209
         ,topY: 283
         ,bottomX: 696
         ,bottomY: 486
         ,callback: function(topX, topY, bottomX, bottomY) {     
            $("input.values").val("(" + topX + "," + topY + ")" + "(" + bottomX + "," + bottomY + ")");
          }
         ,loading: "load.gif"
        });
        $(".example2 img").imagetool();



      });
    </script>
  </head>
  <body>
    <h1>Imagetool demo</h1>
    <p class="small"><em>Version @version</em></p>
    <p>
    Imagetool is a simple plugin for jQuery providing basic cropping and scaling capabilities for images.
    <br />
    Click and drag the image to pan it. Ctrl-click (shift-click on Mac) to zoom.</p>
    
    
    <p>
      Get it from the <a href="http://code.google.com/p/jquery-imagetool/">Googlecode project page</a>
    </p>
    
    
    
    <p class="small">Sample photos by <a href="http://www.flickr.com/people/brentdanley/">brentdanley</a></p>
    
    <h2>Example 1</h2>
    <p>Preset visible area, a custom callback function and a "loading image".</p>
    

    <div class="example1">
      <form action="index.html">
        <fieldset>
          <input class="values" type="text" />
        </fieldset>
      </form>
      <img  src="image.jpg" alt="Butterfly" />
<pre><code>$(function() {
  $(".example2 img").imagetool({
    viewportWidth: 600
   ,viewportHeight: 250
   ,topX: 209
   ,topY: 283
   ,bottomX: 696
   ,bottomY: 486
   ,callback: function(topX, topY, bottomX, bottomY) {     
     $("input.values").val("(" + topX + "," + topY + ")" + "(" + bottomX + "," + bottomY + ")");
    }
   ,loading: "load.gif"
  });
});</code></pre>
      
    </div>
    
    <h2>Example 2 - no options</h2>
    <div class="example2">
      <img src="image.jpg" alt="Butterfly" />

      <pre><code>$(function() {
  $(".imagetool").imagetool();
});</code></pre>
      
    </div>

    
    <p class="small">Copyright 2008 Bendik Rognlien Johansen &lt;bendik.johansen (at) gmail.com&gt;</p>
  </body>
  
</html>
